<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Jonathan Doe - Photographer / Director</title>
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

		<!-- Bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">

		<!-- Stylesheet
    ================================================== -->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/nivo-lightbox.css">
		<link rel="stylesheet" type="text/css" href="css/nivo-lightbox/default.css">
        <style>
        	[v-cloak]{
        		display: none;
        	}
        </style>
	</head>

	<body>
		<!-- Header -->
		<header id="header">
			<div class="intro">
				<div class="overlay">
					<div class="container">
						<div class="row">
							<div class="col-xs-12 col-md-8">
								<div class="intro-text">
									<h1>李紫琪</h1>
									<p>前端工程师 / 全栈工程师</p>
									<a href="#portfolio" class="btn btn-custom btn-lg page-scroll">项目</a>
									<a href="#contact" class="btn btn-custom btn-lg page-scroll">联系我</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- Portfolio Section -->
		<div id="portfolio" >
			<div class="container">
				<div class="section-title">
					<h2>我的项目</h2>
				</div>
				<div class="categories">
					<ul class="cat">
						<li>
							<ol class="type">
								<li>
									<a href="#" data-filter="*" class="active">全部</a>
								</li>
								<li>
									<a href="#" data-filter=".book" >笔记</a>
								</li>
								<li>
									<a href="#" data-filter=".lorem">练习</a>
								</li>
								<li>
									<a href="#" data-filter=".dolor">效果</a>
								</li>
								<li>
									<a href="#" data-filter=".adipiscing">网站</a>
								</li>
							</ol>
						</li>
					</ul>
				</div>
				<div class="row" >
					<div class="portfolio-items" v-cloak="">
						<!--模板-->
						<div v-for="i in arr" :class="['col-sm-6','col-md-4',i.type]">
							<div class="portfolio-item">
								<div class="hover-bg">
									<a :href="i.href">
										<div class="hover-text">
											<div class="overlay-caption">
												<div class="overlay-content">
													<h4>{{i.title}}</h4>
												</div>
											</div>
										</div>
										<img :src="i.img" class="img-responsive" alt="Project Title"> </a>
								</div>
							</div>
						</div>
						<!--模板over-->
						
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Contact Section -->
		<div id="contact">
			<div class="container">
				<h2>联系我</h2>
				<div class="col-md-6">
					<div class="section-title">
						<div class="row">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam. Sed commodo nibh ante facilisis bibendum dolor feugiat at. Duis sed dapibus leo nec ornare diam commodo nibh.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam. Sed commodo nibh ante facilisis bibendum dolor feugiat at. Duis sed dapibus leo nec ornare diam commodo nibh.</p>
							<div class="social">
								<ul>
									<li>
										<a href="#"><i class="fa fa-facebook"></i></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-twitter"></i></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-behance"></i></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-dribbble"></i></a>
									</li>
									<li>
										<a href="#"><i class="fa fa-pinterest"></i></a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-5 col-md-offset-1">
					<div class="section-title">
						<p>For inquiries or collaborations please contact me by email at <strong>info@company.com</strong> or fill out the form below.</p>
					</div>
					<form name="sentMessage" id="contactForm" novalidate>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<input type="text" id="name" class="form-control" placeholder="Name" required="required">
									<p class="help-block text-danger"></p>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<input type="email" id="email" class="form-control" placeholder="Email" required="required">
									<p class="help-block text-danger"></p>
								</div>
							</div>
						</div>
						<div class="form-group">
							<textarea name="message" id="message" class="form-control" rows="4" placeholder="Message" required></textarea>
							<p class="help-block text-danger"></p>
						</div>
						<div id="success"></div>
						<button type="submit" class="btn btn-default btn-lg">Send Message</button>
					</form>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/SmoothScroll.js"></script>
		<script type="text/javascript" src="js/nivo-lightbox.js"></script>
		<script type="text/javascript" src="js/jquery.isotope.js"></script>
		<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
		<script type="text/javascript" src="js/contact_me.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/indexvue.js"></script>
	</body>

</html>